import React, { useEffect,useState } from 'react'
import { useDispatch, useSelector } from "react-redux"
import { StoreDispatch, ReducerType, ListItem } from "../../utils/Type"
import { getList, add, low } from "../../store/action"
import { useNavigate } from 'react-router-dom'
import MyItem from "../../components/MyItem"
// @ts-ignore
import Luo from 'iscroll-luo'
// @ts-ignore
import _ from 'lodash';
type Props = {}

const Page = (props: Props) => {
  // 定义获取数据
  let dispatch: StoreDispatch = useDispatch()
  const [pageSize, setPageSize] = useState(1)
  const [pageNum] = useState(5)
  let list = useSelector((state: ReducerType) => state.list)
  const navigate = useNavigate()
  useEffect(() => {
    dispatch(getList({
      pageSize: pageSize,
      pageNum
    }))
  }, [dispatch,pageSize,pageNum])
 
  // 刷新
  let onDown = () => {
    setPageSize(1)
  }
  // 加载
  let onUp = () => {
    // console.log("加载")
    let sl = pageSize + 1
    setPageSize(sl)
  } 
  return (
    <div className='mains'>
      <Luo
        onDown={_.debounce( onDown, 1500)}
        onUp={_.debounce(onUp, 1500)}
        
      >
        {
          list.length && list.map((item: ListItem, index: number) => {
            return <MyItem key={index} item={item} add={(id: string) => {
              dispatch(add(id))
            }} low={(id: string) => dispatch(low(id))}
              onItemClick={() => {
                navigate(`/xq/${item.id}`)
              }}
              
            ></MyItem>
          })
        }
      </Luo>
     

    </div>
  )
}

export default Page